<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			margin: 100px;
			display: inline-block;
			height: 33px;
			/* 不能给宽度,要推拉门,自由缩放 */
			background: url(image/ao.png) no-repeat;
			padding-left: 15px;
			color: #fff;
			text-decoration: none;
			line-height: 33px;
		}

		a span {
			display: inline-block;
			height: 33px;
			background: url(image/ao.png) no-repeat right;
			/* 不能给宽度,利用padding挤开,要span右边的圆角,所以背景位置右对齐 */
			padding-right: 15px;
		}
	</style>
</head>

<body>
	<a href="#">
		<span>秦时明月</span>
	</a>
	<a href="#">
		<span>天行九歌</span>
	</a>
	<a href="#">
		<span>诛仙</span>
	</a>
</body>

</html>